<template>
    <div class="main">
      <span @click="delBranch" class="sector"><i class="V7_iconfont V7_iconV7tubiao_guanbi "></i></span>
      <el-form
        class="m7-form"
        label-position="top"
        :model="data"
        size="mini"
        ref="Form"
      >
      <el-form-item label="分支名" :rules="{required: true, message: '请输入分支名'}" prop="name">
        <el-input style="margin-bottom: 10px" @input="getName" v-model="data.name"></el-input>
      </el-form-item>
      <div class="queryConditions">
        <div class="andConditions">
          <!-- <span>且</span> -->
          <div class="ConditionsList">
            <div class="Conditions" v-for="(item, index) in data.conditions" :key="index + 'condition'">
              <!-- <el-row :gutter="20"> -->
              <el-form-item style="flex: 3; margin-right: 10px;" :rules="{required: true, message: '请输入'}" :prop="'conditions.'+index+'.k'">
              <el-cascader
              style="width: 100% "
              v-model="item.k"
              filterable
              :options="cascaderList"
              @change="getCascader($event, item);"
              :props="{ label: 'memo', value: 'key', emitPath:false }">
              </el-cascader>
              </el-form-item>
              <el-form-item style="flex:1; margin-right: 10px;" :rules="{required: true, message: '请输入', trigger: 'change'}" :prop="'conditions.'+index+'.op'">
              <el-select filterable style="width: 100%; min-width: 107px" v-model="item.op" @change="opChange($event, index)">
                <el-option v-for="item in sankoList.filter(i => system.includes(item.k) ? i.type : true)" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
              </el-form-item>
              <el-form-item v-if="!(['empty', 'nempty']).includes(item.op)" style="flex: 2"  :prop="'conditions.'+index+'.v'">
              <el-input v-if="!(['empty', 'nempty', 'in', 'nin', 'between', 'notbetween'].includes(item.op))"  v-model="item.v"></el-input>
              <div  v-if="['in', 'nin', 'between', 'notbetween'].includes(item.op)">
                <el-input  style="margin-bottom: 5px; width:80%" v-for="(i, q) in data.valueList[index]" :key="'input' + q" v-model='item.v[q]'>
                  <i v-if="['in', 'nin'].includes(item.op)" style="cursor:pointer" @click="delVal(index,q)" slot="suffix" class="el-input__icon el-icon-delete"></i>
                </el-input>
                <span style="cursor:pointer; margin-left: 3px" v-if="['in', 'nin'].includes(item.op)" @click="addVal(index)"><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i></span>
              </div>
              </el-form-item>

              <!-- </el-row> -->
              <span style="display: inline-block;margin-left: 10px;cursor:pointer" v-if="data.conditions.length > 1" @click="delConditions(index)" ><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i></span>

            </div>
            <div >
              <span style="cursor:pointer" @click="addConditions"><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i>添加条件</span>
            </div>
          </div>
        </div>
        <!-- <div class="straightLine"></div>
        <div class="orConditions">

        </div> -->
        <el-form-item >
         <el-radio v-model="data.operator" label="and">满足所有条件</el-radio>
         <el-radio v-model="data.operator" label="or">满足任意条件</el-radio>
        </el-form-item>
        <el-form-item label="分支转向">
          <span slot="label">
                分支转向
                <el-tooltip class="item" effect="dark" content="不选则视为挂断" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
          </span>
         <el-select
            v-model="data.condition.to"
            placeholder="请选择下一步节点"
            @change="getTo"
            clearable
            style="width: 100%; margin-top: 10px"
          >
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      </el-form>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
interface Condition {
  k: string
  op: string
  v: string
}
@Component({ name: 'Model' })
export default class Model extends Vue {
  @Prop({ default: () => [] }) private cascaderList!: any
  @Prop({
    default: () => {
      return {
        name: '',
        operator: 'and',
        next: '',
        conditions: [{ k: '', op: '', v: '' }],
        valueList: [],
        condition: { label: '分支1', to: '', value: '' }
      }
    }
  }) private data!: any

  @Prop({
    default: () => {
      return { label: '', to: '', value: '' }
    }
  }) private condition!: any

  @Prop({ default: [] }) private nodeList!: any
  @Prop({ default: {} }) private currentData!: any
  @Prop({ default: '' }) private id!: any
  // @Prop({default: [{k: '', op: '', v: ''}]}) private list!: any
  // private list: Condition[] = [{k: '', op: '', v: ''}]
  private $message
  private addConditions () {
    if (this.data.conditions.length >= 10) {
      this.$message.error('最多添加十个')
      return
    }
    this.data.conditions.push({
      k: '',
      op: '',
      v: ''
    })
  }

  private valueList: any = []
  private delConditions (index) {
    this.data.conditions.splice(index, 1)
  }

  private getCascader (val, item) {
    item.op = ''
    if (this.cascaderList[1].children.find(i => i.key === val)) {
      item.varType = 'custom'
    } else {
      item.varType = ''
    }
  }

  get sankoList () {
    return [
      { value: 'eq', label: '等于', type: 1 },
      { value: 'neq', label: '不等于', type: 1 },
      { value: 'in', label: '包含', type: 1 },
      { value: 'nin', label: '不包含', type: 1 },
      { value: 'empty', label: '为空' },
      { value: 'nempty', label: '不为空' },
      { value: 'gt', label: '大于' },
      { value: 'gte', label: '大于或等于' },
      { value: 'lt', label: '小于' },
      { value: 'lte', label: '小于或等于' },
      { value: 'between', label: '在范围内' },
      { value: 'notbetween', label: '不在范围内' }
    ]
  }

  private getName () {
    this.condition.label = this.data.name
  }

  private system = ['superUniqueId', 'callType', 'displayNumber', 'trunkNumber']
  public delBranch () {
    this.$emit('delBranch', this.id)
  }

  private getTo (val) {
    this.data.next = val
  }

  public showData (val) {
    console.log(this.data)
  }

  private opChange (val, index) {
    if (val === 'in' || val === 'nin') {
      this.$set(this.data.valueList, index, [])
      this.data.valueList[index].push(1)
      this.$set(this.data.conditions[index], 'v', [])
      // this.data.conditions[index].v = []
    } else {
      if (val === 'between' || val === 'notbetween') {
        this.$set(this.data.valueList, index, [])
        this.data.valueList[index].push(1, 1)
        this.$set(this.data.conditions[index], 'v', ['', ''])
      } else {
        this.$set(this.data.valueList, index, [])
        this.$set(this.data.conditions[index], 'v', '')
      }
    }
  }

  private addVal (index) {
    this.data.valueList[index].push(1)
    this.$forceUpdate()
  }

  private delVal (i, q) {
    this.data.valueList[i].splice(q, 1)
    this.data.conditions[i].v.splice(q, 1)
  }

  private created () {
    if (!this.data.condition) {
      this.$set(this.data, 'condition', { label: this.data.name, to: this.data.next, value: '' })
    }
  }

  private mounted () {
    this.data.valueList = []
    this.data.conditions.forEach((element, index) => {
      let val
      if (['in', 'nin', 'between', 'notbetween'].includes(element.op)) {
        val = new Array(element.v.length).fill(1)
      } else {
        val = []
        element.v = Array.isArray(element.v) ? element.v[0] : element.v
      }
      this.$set(this.data.valueList, index, val)
    });
  }
}
</script>
<style lang='stylus' scoped>
.main
  width: 100%;
  background: #F8FAFD;
  border-radius: 4px;
  padding 16px
  margin-bottom: 16px
  position relative

// .andConditions
//   display: flex
.Conditions
  display: flex
.add-span
  font-size 12px
  cursor pointer
  &:before
    margin-right 4px
.straightLine
  height: 1px
  width: 100%
  background: #F2F3F4;
  position relative
  margin: 14px 0
  &:before
    content: '或'
    position absolute
    padding: 0 20px
    transform: translateX(248px) translateY(-50%);
    background: #F8FAFD;
.sector
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 16px 0 0;
  height: 16px
  width 16px
  transform: rotateY(180deg) rotateX(180deg);
  background: #FC6B5C
  cursor pointer
  display: none
  i
    position relative
    font-size: 12px
    color: #fff
    top: -5px
.main:hover .sector
  display: block
.tip-span
    color $icon-gray
    cursor pointer
    margin-left 4px
    font-size 14px
</style>
